<template>
  <el-dialog
    class="public-dialog"
    :title="title"
    width="720"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="min-h-[300px]">
      <div
        class="text-[#e50113] py-[8px]"
        v-if="title == '批量上传匹配报关信息'"
      >
        文件名称以 "合同号+类型"
      </div>
      <Upload
        label="上传文件"
        require
        :modelValue="declare_file"
        accept=".JPG,.JPEG,.PNG,.PDF"
        :limit="100"
        :multiple="true"
        @update:modelValue="(val) => handleInput(val, 'declare_file')"
        key="declare_file"
        :http-request="handleHttpRequest"
      >
      </Upload>
      <!-- <Upload
        label="放行通知书"
        require
        :modelValue="release_notice_file"
        accept=".JPG,.JPEG,.PNG,.PDF"
        @update:modelValue="(val) => handleInput(val, 'release_notice_file')"
        key="release_notice_file"
      >
      </Upload>
      <Upload
        label="提货单"
        require
        :modelValue="waybill_file"
        accept=".JPG,.JPEG,.PNG,.PDF"
        @update:modelValue="(val) => handleInput(val, 'waybill_file')"
        key="waybill_file"
      >
      </Upload>
      <Upload
        label="国内运输发票"
        require
        :modelValue="dt_invoice_file"
        accept=".JPG,.JPEG,.PNG,.PDF"
        @update:modelValue="(val) => handleInput(val, 'dt_invoice_file')"
        key="dt_invoice_file"
      >
      </Upload>
      <Upload
        label="装箱单"
        require
        :modelValue="box_file"
        accept=".JPG,.JPEG,.PNG,.PDF"
        @update:modelValue="(val) => handleInput(val, 'box_file')"
        key="box_file"
      >
      </Upload> -->
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import Upload from "@/components/Upload/index.vue";
import { predictionUpload } from "../../api/index.js";
import { getImportUrl } from "@/api/public";
import { uploadFile } from "@/api/public.js";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  id: { type: [Number, String], default: "" },
  title: { type: String, default: "上传匹配报关信息" },
});
const { id } = toRefs(props);
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const loading = ref();
const disabled = ref(false)
const fileList = ref([]);

const declare_file = ref([]);
const release_notice_file = ref([]);
const waybill_file = ref([]);
const dt_invoice_file = ref([]);
const box_file = ref([]);

// const handleHttpRequest = async (options) => {
// console.log(88888);
//   let formData = new FormData();
//   const { file } = options;
//   formData.append("file", file);
//   try {
//     const { data } = await uploadFile(formData, "f");
//     return data;
//   } catch (e) {
//     console.error(e);
//     options.onError(e);
//   }
// };

const handleHttpRequest = (options) => {
  // console.log(99887);
  // fileList.value = options
  // console.log(fileList.value);
};
const handleInput = (val, key) => {
  // console.log(112233);
  // console.log(val);
  fileList.value = val;
  // console.log(fileList.value);

  // declare_file.value = val;
  // if(val){
  //   declare_file.value = val;
  //   // declare_file.value = [...declare_file.value,...val];
  // }
  // switch (key) {
  //   case "declare_file":
  //     declare_file.value = val;
  //     break;
  //   case "release_notice_file":
  //     release_notice_file.value = val;
  //     break;
  //   case "waybill_file":
  //     waybill_file.value = val;
  //     break;
  //   case "dt_invoice_file":
  //     dt_invoice_file.value = val;
  //     break;
  //   case "box_file":
  //     box_file.value = val;
  //     break;
  //   default:
  //     break;
  // }
};

const handleSave = async () => {
  try {
    // if (!declare_file.value?.length) {
    //   ElMessage.warning("请上传报关单文件");
    //   return;
    // }
    // if (!release_notice_file.value?.length) {
    //   ElMessage.warning("请上传放行通知书");
    //   return;
    // }
    // if (!waybill_file.value?.length) {
    //   ElMessage.warning("请上传提货单");
    //   return;
    // }
    // if (!dt_invoice_file.value?.length) {
    //   ElMessage.warning("请上传国内运输发票");
    //   return;
    // }
    // if (!box_file.value?.length) {
    //   ElMessage.warning("请上传装箱单");
    //   return;
    // }
    if (!fileList.value?.length) {
      ElMessage.warning("请上传文件");
      return;
    }
    let listData = [];
    const fn = async (list) => {
      return new Promise(async (resolve, reject) => {
        let formData = new FormData();
        formData.append("file", list[0].raw);
        // formData.append("name", list[0].name);
        let { data } = await uploadFile(formData, "f");
        listData.push(data);
        list.shift();
        if (list?.length) {
          setTimeout(() => {
            resolve(fn(list));
          }, 1000);
        } else {
          resolve();
        }
      });
    };
    loading.value = true;

    await fn(fileList.value);

    // loading.value = true;
    // let _declare_file = declare_file.value?.map((item) => item.response);
    // let _release_notice_file = release_notice_file.value?.map(
    //   (item) => item.response
    // );
    // let _waybill_file = waybill_file.value?.map((item) => item.response);
    // let _dt_invoice_file = dt_invoice_file.value?.map((item) => item.response);
    // let _box_file = box_file.value?.map((item) => item.response);
    // listData

    const { code, message } = await predictionUpload({
      id: id.value,
      declare_files: listData,
      // declare_file:_declare_file,
      // release_notice_file:_release_notice_file,
      // waybill_file:_waybill_file,
      // dt_invoice_file:_dt_invoice_file,
      // box_file:_box_file,
    });
    if (code !== 200) {
      ElMessage.warning(message);
      return;
    }
    ElMessage.success("导入成功!");
    handleClose(true);
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  declare_file.value = [];
  await nextTick();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
